<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Populating Drop down list with Coldfusion Array</title>
		<script type='text/javascript' src='../core/js/prototype.js'></script>
		<script type='text/javascript' src='../core/js/scriptaculous.js'></script>
		<script type='text/javascript' src='../core/js/mxAjax.js'></script>
		<script type='text/javascript' src='../core/js/mxMultiBarSlider.js'></script>
		<script language="javascript">
			var url = "<cfoutput>#ajaxUrl#</cfoutput>";
			var checkBoxGroup;
			
			function init() {
				checkBoxGroup = new mxAjax.CheckBoxGroup({
					parser: new mxAjax.CFArrayToJSKeyValueParser(),
					fieldName: "fieldName",
					executeOnLoad: true,
					target: "model", 
					paramArgs: new mxAjax.Param(url,{param:"make={make}", cffunction:"makelookup"}),
					source: "make"
				});
			}
			//addOnLoadEvent(function() {init();});
		</script>
	</head>
	<body>
		<h1>Slider control with multiple bars</h1>
		

<!---
		<div style="margin-top: 5px; height: 20px;" id="leg1TakeoffDiv">
			<div false="" style="position: relative;" id="coleg1TakeoffDiv">
				<div style="position: absolute; left: 0px; top: 0px;">
				<div style="position: absolute; left: 220px; top: 0px;" id="vcleg1TakeoffDiv">
			</div>
		</div>
--->

		<p><strong>Standard horizontal slider</strong> 
		<div id="track10" style="width:220px;height:14px;background-color:#aaa;background:url(http://localhost/mx/core/images/sliderbgwticks.gif) center no-repeat;">
		    <div id="handle10" style="position: absolute; display: block; z-index: 75; left: 8px; cursor:default;width:12px;height:19px;background:url(http://localhost/mx/core/images/sliderthumb2.gif) 100% no-repeat;"></div>
		    <div id="handle11" style="position: absolute; display: block; z-index: 75; left: 219px; cursor:default;width:12px;height:19px;background:url(http://localhost/mx/core/images/sliderthumb2.gif) 100% no-repeat;"> </div>
		</div>
		<div id="debug10" style="padding-top: 5px;"></div></p>
		<br><br>
		
		<script type="text/javascript" language="javascript">
		  // <![CDATA[
		  
		    new Control.Slider('handle10','handle10','track10',{
		      startBarPos:8,
		      onSlide:function(v){$('debug10').innerHTML='slide: '+v},
		      onChange:function(v){$('debug10').innerHTML='changed! '+v}});
		
		  // ]]>
		  </script>
		</p>


		
	</body>
</html>